My project is entirely written as CommonJS module and I don't plan to change it. The problem is that I have to use a library that is ESM when using gulp.
The file where this situation appears:
const { dest, src } = require('gulp')
const imagemin = require('gulp-imagemin') // This is a ESM. Compiler gives error [ERR_REQUIRE_ESM]
const images = () => {
// We have specific configs for jpeg and png files to try
// to really pull down asset sizes
return src('./src/images/**/*')
.pipe(
imagemin(
[
imagemin.mozjpeg({ quality: 60, progressive: true }),
imagemin.optipng({ optimizationLevel: 5, interlaced: null })
],
{
silent: true
}
)
)
.pipe(dest('./dist/images'))
}
module.exports = images
This is the error that node gives
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Lucas\Documents\repos\nexus-materiales\node_modules\gulp-imagemin\index.js from C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js not supported.
Instead change the require of index.js in C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (C:\Users\Lucas\Documents\repos\nexus-materiales\gulp-tasks\images.js:2:18)
at Object.<anonymous> (C:\Users\Lucas\Documents\repos\nexus-materiales\gulpfile.js:4:16)
at async Promise.all (index 0) {
code: 'ERR_REQUIRE_ESM'
}
So, How could I include this file using commonJS if it's an ESM? Is this possible?
To import an ES module from CommonJS code, use a dynamic import.
ES module imports are asynchronous: you'll have to make sure that the gulp-imagemin import has completed before creating the gulp stream. This can be achieved with gulp.series.
const { dest, series, src } = require('gulp');
let imagemin;
const images = series(
async () => {
imagemin = await import('gulp-imagemin');
},
() => src('./src/images/**/*')
.pipe(
imagemin.default(
[
imagemin.mozjpeg({ quality: 60, progressive: true }),
imagemin.optipng({ optimizationLevel: 5, interlaced: null })
],
{
silent: true
}
)
)
.pipe(dest('./dist/images'))
);
Note that I used imagemin.default to access the default export of gulp-imagemin, since it's being imported dynamically.